<%@page import="shuyu.ArticleDao"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>发现</title>
<link rel="shortcut icon" type="image/x-icon" href="img/yitiao-icon.png">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/lib/bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/lib/font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/footer-bar.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/find.css">
<style type="text/css">
	* {
		    padding: 0;
		    margin: 0;
		}
		section {
		    width: 100%;
		}
		.col-xs-12 {
		    width: 100%;
		    padding: 0;
		}
		body {
		    width: 100vw;
		    height: auto;
		}
		a {
			color: #141414;
    		text-decoration: none;
		}
		.row {
		    width: 100%;
		    margin: auto;
		}
		#searchInput {
		    margin-top: 20px;
		    text-align: center;
		    left: 20px;
		}
		.search-icon {
		    position: relative;
		    top: -35px;
		    transform: translate(50%, 50%);
		    color: grey;
		}
		.panel {
		    border-top: 3px solid;
		    color: rgba(98, 98, 98, .05);
		}
		.panel-bar {
		    display: flex;
		    justify-items: center;
		    margin: 5px;
		}
		.panel-bar-add {
			display: flex;
			justify-content: center;
		}
		.follow-bar {
		    justify-content: center;
		    align-items: center;
		}
		.panel-bar .user {
		    width: 40px;
		    height: 40px;
		    margin: 5px;
		}
		.panel-bar .username {
		    line-height: 40px;
		    margin: 5px;
		    color: #444444;
		}
		.panel-follow {
		    width: 50px;
		    height: 36px;
		    line-height: 27px;
		    text-align: center;
		    font-weight: 500;
		    padding: 5px;
		    color: #fab95b;
		    background: #fff6be;
		    position: relative;
		    top: 10px;
		    -moz-border-radius:    10px;
		    -webkit-border-radius: 10px;
		    border-radius:         10px;
		}
		.panel-follow-add {
			width: 50px;
		    height: 36px;
		    line-height: 27px;
		    text-align: center;
		    font-weight: 500;
		    padding: 5px;
		    color: #fab95b;
		    background: #fff6be;
		    position: relative;
		    top: 0;
		    -moz-border-radius:    10px;
		    -webkit-border-radius: 10px;
		    border-radius:         10px;
		}
		.panel-follow-add > a {
			color: #fab95b;
		}
		/* .col-xs-3 {
			padding-right: 20px; 
			padding-left: 20px;
		} */
		.col-xs-12 {
		    width: 100%;
		    padding: 0;
		}
		.tag-title  {
		    margin: 20px 10px 10px;
		    font-size: 16px;
		}
		.tag-text {
		    margin: 10px;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    /*控制多行的行数*/
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		}
		.tag-img {
		    width: 100%;
		}
		.add-tag {
		    margin: 15px 0;
		    display: flex;
		    align-content: center;
		    align-items: center;
		}
		.divider {
		    border-bottom: 3px solid;
		    color: rgba(98, 98, 98, .05);
		}
		.tag-container {
		    color: #333333;
		}
</style>
</head>
<body>
	<section>
		<div class="row">
			<div class="col-xs-1"></div>
			<div class="col-xs-10">
				<form class="form-horizontal">
					<div class="form-group">
						<input type="text" class="form-control" id="searchInput"
							placeholder="编辑精选"> <i class="fa fa-search search-icon"></i>
					</div>
				</form>
			</div>
			<div class="col-xs-1"></div>
		</div>
	</section>
	<section>
		<a href="templates/particulars.jsp">
			<div class="tag-container">
				<div class="row panel">
					<div class="col-xs-8 panel-bar">
						<img src="img/follow/hp-sakuraGirl.jpeg" alt="..."
							class="img-circle user"> <span class="username">sakura</span>
					</div>
					<div class="col-xs-3 panel-bar follow-bar">
						<span class="panel-follow">关注</span>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<p class="tag-title">
							<strong>三十五度灰~</strong>
						</p>
						<p class="tag-text"></p>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12 tag-img-container">
						<img src="img/find/find-1.png" alt="..."
							class="img-rounded tag-img">
					</div>
				</div>
		
				<div class="row add-tag">
					<div class="col-xs-2">
						<span class="fa fa-heart-o" aria-hidden="true">&nbsp;57</span>
					</div>
					<div class="col-xs-2">
						<span class="fa fa-comment-o" aria-hidden="true">&nbsp;24</span>
					</div>
					<div class="col-xs-2">
						<span class="fa fa-send-o" aria-hidden="true">&nbsp;32</span>
					</div>
					<div class="col-xs-3 follow-bar panel-bar-add">
						<span class="panel-follow-add">编辑</span>
					</div>
					<div class="col-xs-3 follow-bar panel-bar-add">
						<span class="panel-follow-add">
							删除
						</span>
					</div>
				</div>
				<div class="row divider"></div>
			</div>
		</a>
		<div class="tag-container">
			<div class="row panel">
				<div class="col-xs-8 panel-bar">
					<img src="img/follow/hp-GirlInWhiteShirt.jpeg" alt="..."
						class="img-circle user"> <span class="username">K</span>
				</div>
				<div class="col-xs-3 panel-bar follow-bar">
					<span class="panel-follow">关注</span>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<p class="tag-title">
						<strong>我给自己造一个小院：坐北朝南，沐浴阳光。</strong>
					</p>
					<p class="tag-text">我们中的很多人都是在院子里长大的，无论是豫北还是皖南，院子里都有我们不愿割舍的童年。
					</p>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12 tag-img-container">
					<img src="img/find/find-2.png" alt="..."
						class="img-rounded tag-img">
				</div>
			</div>
			<div class="row add-tag">
				<div class="col-xs-2">
					<span class="fa fa-heart-o" aria-hidden="true">&nbsp;27</span>
				</div>
				<div class="col-xs-2">
					<span class="fa fa-comment-o" aria-hidden="true">&nbsp;19</span>
				</div>
				<div class="col-xs-2">
					<span class="fa fa-send-o" aria-hidden="true">&nbsp;22</span>
				</div>
				<div class="col-xs-3 follow-bar panel-bar-add">
						<span class="panel-follow-add">编辑</span>
					</div>
					<div class="col-xs-3 follow-bar panel-bar-add">
						<span class="panel-follow-add">
							删除
						</span>
					</div>
			</div>
			<div class="row divider"></div>
		</div>
	</section>
	<section id='add'>
		
	</section>
	<footer>
		<div id="footer-bar">
			<div class="item find active">
				<a href="./index.jsp" style="text-decoration: none"> <span
					class="footer-title">发现</span>
				</a>
			</div>
			<div class="item follow">
				<a href="templates/follow.jsp" style="text-decoration: none"> <span
					class="footer-title">关注</span>
				</a>
			</div>
			<div class="item release">
				<a href="templates/release.jsp" style="text-decoration: none">
					<img src="img/find/plus.png" alt="plus" class="plus">
				</a>
			</div>
			<div class="item information">
				<a href="templates/information.jsp" style="text-decoration: none">
					<span class="footer-title">消息</span>
				</a>
			</div>
			<div class="item home">
				<a href="templates/home.jsp" style="text-decoration: none"> <span
					class="footer-title">我的</span>
				</a>
			</div>
		</div>
	</footer>
</body>
<script src="${pageContext.request.contextPath }/lib/jquery/jquery.js" type="text/javascript"
	charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/lib/bootstrap-3.3.7/dist/js/bootstrap.min.js"
	type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/js/footer-bar.js"></script>
<script type="text/javascript">
	
	$.ajax({
		type: 'post',
		async: true,
		dataType: 'json',
		url: '${pageContext.request.contextPath }/SetArticle',
		success: function (res) {
			console.log(res);
		
			for (var i = 0; i < res.length; i++) {
				$('#add').append(
						'<div class="tag-container">'+
						'<div class="row panel">'+
							'<div class="col-xs-8 panel-bar">'+
								'<img src="img/follow/hp-GirlInWhiteShirt.jpeg" alt="..." class="img-circle user"> <span class="username">K</span>'+
							'</div>'+
							'<div class="col-xs-3 panel-bar follow-bar">'+
								'<span class="panel-follow">关注</span>'+
							'</div>'+
						'</div>'+
						'<div class="row">'+
							'<div class="col-xs-12">'+
								'<p class="tag-title">'+
									'<strong>'+ res[i].title +'</strong>'+
								'</p>'+
								'<p class="tag-text">'+ res[i].context +'</p>'+
							'</div>'+
						'</div>'+
						'<div class="row">'+
							'<div class="col-xs-12 tag-img-container">'+
								'<img src="img/find/find-2.png" alt="..." class="img-rounded tag-img">'+
							'</div>'+
						'</div>'+
						'<div class="row add-tag">'+
							'<div class="col-xs-2">'+
								'<span class="fa fa-heart-o" aria-hidden="true">&nbsp;27</span>'+
							'</div>'+
							'<div class="col-xs-2">'+
								'<span class="fa fa-comment-o" aria-hidden="true">&nbsp;19</span>'+
							'</div>'+
							'<div class="col-xs-2">'+
								'<span class="fa fa-send-o" aria-hidden="true">&nbsp;22</span>'+
							'</div>'+
							'<div class="col-xs-3 follow-bar panel-bar-add">'+
									'<span class="panel-follow-add">'+
										'<a href="${pageContext.request.contextPath }/templates/edit.jsp?id='+ res[i].id +'&&title='+ res[i].title +'&&context='+res[i].context +'">编辑</a>'+
									'</span>'+
								'</div>'+
								'<div class="col-xs-3 follow-bar panel-bar-add">'+
									'<span class="panel-follow-add">'+
										'<a href="${pageContext.request.contextPath }/DelArticle?id='+ res[i].id +'">删除</a>'+
									'</span>'+
								'</div>'+
						'</div>'+
						'<div class="row divider"></div>'+
					'</div>'	
				)
			}
			$('.divider').last().css('margin-bottom', '50px');
		}
	})
</script>
</html>